<template>
    <div>数据管理
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="->">
    <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>数据管理(三维扫描)</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
        <!-- 搜索区域 -->
        <el-row :gutter="10">
            <el-col :span="8">      
            <el-input placeholder="请输入搜索内容" v-model="advancedSearch.query" class="input-with-select" clearable 
             @clear ="UserSelect()" @keyup.enter.native="UserSelect()">
                <el-select v-model="advancedSearch.select" slot="prepend" placeholder="请选择" >
                    <el-option label="姓名" value="0"></el-option>
                    <el-option label="联系电话"value="1"></el-option>
                    <!-- <el-option label="设备编码" value="devnum"></el-option> -->
                </el-select>
                <el-button slot="append" type="primary" icon="el-icon-search" @click="UserSelect()">搜索</el-button>
            </el-input>
            </el-col>
             <el-col :span="2">
            <el-popover style="margin-top:10px;" trigger="click" width="700">
                <el-button slot="reference" >高级检索</el-button>
                <el-form label-position="left" ref="selectFormRef" :model="advancedSearch">
                    <el-row :gutter="10">
                        <el-col :span="3">
                            <el-form-item label="性别" prop="sex">
                                <el-radio-group v-model="advancedSearch.sex" style="width:40%">
                                    <el-radio label="男"></el-radio>
                                    <el-radio label="女"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="年龄" prop="age_lower" >
                                <el-input style="width:50px" v-model="advancedSearch.age_lower"></el-input> - 
                                <el-input style="width:50px" v-model="advancedSearch.age_upper"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="身高" prop="height_lower">
                                <el-input style="width:60px" v-model="advancedSearch.height_lower"></el-input>cm - 
                                <el-input style="width:60px" v-model="advancedSearch.height_upper"></el-input>cm
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="体重" prop="weight_lower">
                                <el-input style="width:50px" v-model="advancedSearch.weight_lower"></el-input>kg - 
                                <el-input style="width:50px" v-model="advancedSearch.weight_upper"></el-input>kg
                            </el-form-item>
                        </el-col>
                        
                    </el-row>
                    <el-row :gutter="10">
                         
                         <el-col :span="9">
                            <el-form-item label="负重" prop="weight_bearing_lower">
                                <el-input style="width:60px" v-model="advancedSearch.weight_bearing_lower"></el-input>kg - 
                                <el-input style="width:60px" v-model="advancedSearch.weight_bearing_upper"></el-input>kg
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="8">
                            <el-form-item label="测量模式" prop="measureMode">
                                <el-input style="width:70%" v-model="advancedSearch.measureMode"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="医生" prop="doctor">
                                <el-input style="width:70%" v-model="advancedSearch.doctor"></el-input>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="3">
                            <el-button type="primary" @click="UserSelect()">筛选</el-button>
                       </el-col>
                        <el-col :span="3">
                            <!-- <el-button type="primary" @click="UserSelect()">筛选</el-button> -->
                            <el-button type="info" @click="resetForm()">重置</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </el-popover>
            </el-col>
            <el-col :span="4" style="magrin-left:20px;">
                <el-date-picker type="datetime" placeholder="开始日期" value-format="yyyy-MM-dd HH:mm:ss" 
                    v-model="advancedSearch.beginTime" :picker-options="startPicker" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="0.5">_</el-col>
            <el-col :span="4">
                <el-date-picker type="datetime" placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
                v-model="advancedSearch.endTime" :picker-options="startPicker" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col :span="2">
                <el-button icon="iconfont icon-excel" style="height:40px" @click="UserSelect()">查询</el-button>
            </el-col>
            <el-col :span="2">
                        <el-button type="primary" icon="el-icon-download" style="height:40px" @click="batchDownload()">三维报告批量下载</el-button>
            </el-col>

        </el-row>
        
        <el-table :data="patientList" border stripe element-loading-text="拼命加载中">
            <el-table-column type="index"></el-table-column><!--  索引页  -->
            <el-table-column label="姓名" prop="name"></el-table-column><!--  索引页  -->
            <el-table-column label="性别" prop="sex" width="43px"></el-table-column><!--  索引页  -->
            <el-table-column label="年龄" prop="age" width="43px"></el-table-column><!--  索引页  -->
            <!-- <el-table-column label="出生日期" prop="birthDate" width="101px"></el-table-column><!--  索引页  -->
            <!-- <el-table-column label="身高" prop="height" width="50px"></el-table-column><!--  索引页  -->
            <!-- <el-table-column label="体重" prop="weight" width="50px"></el-table-column><!--  索引页  -->
            <!-- <el-table-column label="联系方式" prop="phone" width="113px"></el-table-column><!--  索引页  -->
            <!-- <el-table-column label="患者自诉" prop="selftalk"></el-table-column><!--  索引页  -->
            <!-- <el-table-column label="测量模式" prop="measureMode" width="100px"></el-table-column> 索引页  -->
            <!-- <el-table-column label="手术史" prop="historyofsurgery"></el-table-column> -->
            <!-- <el-table-column label="医生" prop="doctor"></el-table-column> --> 
            <!-- <el-table-column label="设备" prop="deviceNum"></el-table-column>
            <el-table-column label="医院" prop="hospitalName"></el-table-column>
            <el-table-column label="操作"> -->

            <el-table-column label="出生日期" prop="dataOfBirth"></el-table-column><!--  索引页  -->
            <el-table-column label="身高" prop="height"></el-table-column><!--  索引页  -->
            <el-table-column label="体重" prop="weight"></el-table-column><!--  索引页  -->
            <el-table-column label="联系电话" prop="phone"></el-table-column><!--  索引页  -->
             <!-- <el-table-column label="传真" prop="fax"></el-table-column>  -->
             <!-- <el-table-column label="负重" prop="weightBearing"></el-table-column> -->
            <!-- <el-table-column label="鞋码" prop="shoessize"></el-table-column><!--  索引页  -->
            <!-- <el-table-column label="运动能力" prop="athleticAbility"></el-table-column> -->
            <!-- <el-table-column label="病史" prop="medicalHistory"></el-table-column> -->
            <!-- <el-table-column label="医生" prop="doctor"></el-table-column> -->
            
            <!-- <el-table-column label="公司名字" prop="businessName"></el-table-column> -->
            <!-- <el-table-column label="公司地址" prop="address"></el-table-column> --> 
            <el-table-column label="上传时间" prop="createTime"></el-table-column> 
            <el-table-column label="设备" prop="devNum"></el-table-column>
            <el-table-column label="操作" width="120px">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="下载报告" placement="top">
                    <el-button type="primary" icon="el-icon-download"  size="mini" @click="downloadReport(scope.row)" 
                    v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="正在下载，请稍候"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="预览报告" placement="top">
                    <el-button type="primary" icon="el-icon-s-order"  size="mini" @click="previewReport(scope.row)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="advancedSearch.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="advancedSearch.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                >
            </el-pagination>
    </el-card>
    </div>  
</template>

<script>
import { batchDownload3Api,downloadThreePdfApi,advancedQueryApi } from '@/api/index'
export default {
    data(){
        return{
            advancedSearch:{
                query:"",     //查询信息
                name:"",
                sex:"",
                age_lower:"",
                age_upper:"",
                height_lower:"",
                height_upper:"",
                weight_lower:"",
                weight_upper:"",
                weight_bearing_lower:"",
                weight_bearing_upper:"",
                phone:"",
                beginTime:"",
                endTime:"",
                select:"",
                pageNum:1,    //当前页数
                pageSize:10,//每页最大数
            },
              
            patientList:[],  //用户列表
            total:0, //总记录数
            currentPage: 1,
            tableData: [],
            fullscreenLoading: false,
            pdfUrl:"",
            startPicker:{
                disabledDate(time) {
                return time.getTime() > Date.now();
                },
            }
        }
    },
    watch:{       
            "advancedSearch.beginTime":function(){
            if(this.advancedSearch.endTime&&this.advancedSearch.beginTime > this.advancedSearch.endTime){
                this.$message.warning("结束日期不能早于开始日期")
                return;}
            },
            "advancedSearch.endTime":function(){
            if(this.advancedSearch.beginTime > this.advancedSearch.endTime){
                this.$message.warning("结束日期不能早于开始日期")
                return;}
            },
    },
    created(){
       this.getPatientList();
    },
    methods: {
         resetForm(){
            this.$refs.selectFormRef.resetFields()
            this.advancedSearch.age_upper = ""
            this.advancedSearch.height_upper = ""
            this.advancedSearch.weight_upper = ""
            this.advancedSearch.weight_bearing_upper= ""
            this.advancedSearch.beginTime= ""
            this.advancedSearch.endTime= ""
            this.getPatientList()
        },
        //id
        indexMethod(index){
          return (this.advancedSearch.pageNum - 1) * this.advancedSearch.pageSize + index + 1
           
        },
        getPatientList(){
            advancedQueryApi(this.advancedSearch).then(res=>{
                console.log(res)
                this.patientList = res.data.threes
                this.total = res.data.total
            })
        },
         //用户筛选
        UserSelect(){
            if(this.advancedSearch.select === "0"){
                this.advancedSearch.name = this.advancedSearch.query
                this.advancedSearch.phone = "" 
            }else if(this.advancedSearch.select ==="1"){
                this.advancedSearch.name = ""
                this.advancedSearch.phone  = this.advancedSearch.query
            }
                this.advancedSearch.pageNum=1
                // getPatientList();
                 advancedQueryApi(this.advancedSearch).then(res=>{
                this.patientList = res.data.threes;
                console.log(res)
                this.total = res.data.total;
            })
        },
        //最大数
        handleSizeChange(newSize){
            this.advancedSearch.pageSize = newSize;
            this.getPatientList();
        },
        //pageNum的触发动作
        handleCurrentChange(newPage){
            this.advancedSearch.pageNum = newPage;
            this.getPatientList();
        },
        //批量下载的核心函数
        downloadZip(res,fileName){
            if(!res) {
                return ;
            }
            const  blob = new Blob([res], {type: 'application/zip'});

            let url = window.URL.createObjectURL(blob);
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;
            link.download = decodeURIComponent(fileName + ".zip");
            document.body.appendChild(link);
            link.click();
            window.URL.revokeObjectURL(url); // 释放掉blob对象
            document.body.removeChild(link);
            this.fullscreenLoading = false;
        },
        batchDownload(){
            //  if(!this.advancedSearch.beginTime || !this.advancedSearch.endTime) {
            //     this.$message.warning("请输入起始和结束日期");
            //     return;
            // }else 
            if(this.advancedSearch.beginTime > this.advancedSearch.endTime){
                this.$message.warning("结束日期不能早于开始日期")
                return;
            }
            this.fullscreenLoading = true
            setTimeout(() => {
                this.fullscreenLoading = false
                }, 20000);
            console.log("三维报告的批量下载："+this.advancedSearch)
            batchDownload3Api(this.advancedSearch).then(res=>{
               const fileName = '三维报告';
                this.downloadZip(res,fileName)
                this.fullscreenLoading = false 
            }).catch(()=>{
                this.fullscreenLoading = false
            })
        },
        //下载单份三维报告
        downloadReport(params){
            var fileName = this.getFileName(params)
            this.fullscreenLoading = true;
            setTimeout(()=>{
                this.fullscreenLoading = false
            },10000)
            downloadThreePdfApi(params.id).then(res=>{
                this.download(res,fileName)
            }).catch(()=>{
                this.fullscreenLoading = false
            })
        },
        download(res, fileName) {
            if(!res) {
                return;
            }
             const  blob = new Blob([res], {type: 'application/pdf'});
            let url = window.URL.createObjectURL(blob);

            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;
            link.download = decodeURIComponent(fileName);
            
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);

            window.URL.revokeObjectURL(url); // 释放掉blob对象
            this.fullscreenLoading = false;
        },
        getFileName(params){
                let str = params.filePath
                let strList = new Array()
                strList = str.split("\\")
                let name = strList[strList.length-1]
                let nameList = new Array()
                nameList = name.split(".")
                return nameList[0]
        },




        previewReport(params){
            this.fullscreenLoading = true
            setTimeout(() => {
                this.fullscreenLoading = false
                });
            downloadThreePdfApi(params.id).then(res => {
                const  blob = new Blob([res], {type: 'application/octet-stream'});
                // console.log(blob);
                const pdfUrl = window.URL.createObjectURL(blob);
                // console.log(decodeURIComponent(pdfUrl));
                window.open('../pdfjs/web/viewer.html?file=' + encodeURIComponent(pdfUrl));
                
            }).catch(()=>{
              
                this.fullscreenLoading = false
            });
            this.fullscreenLoading = false
            window.URL.revokeObjectURL(pdfUrl);
        },
    },
}
</script>


<style lang="less" scoped>
.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 17px;
    
}
.el-select{
    width: 110px;
  }
.input-with-select{
    background-color: #fff;
  }

</style>